<html>
<head>

<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
<title>jQuery UI - Demos & Documentation</title>

<meta content="jquery,user interface,ui,widgets,interaction,javascript"
	name="keywords" />
<meta
	content="jQuery UI is jQuery's user interface library that comes with many widgets, interaction modules and themes."
	name="description" />
<meta content="Paul Bakaus" name="author" />

<link href="/images/favicon.ico" rel="shortcut icon" />
<link type="image/x-icon" href="/images/favicon.ico" rel="icon" />
<link media="all" type="text/css"
	href="http://static.jquery.com/ui/css/base2.css" rel="stylesheet" />
<link media="all" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"
	rel="stylesheet" />
<link media="all" type="text/css"
	href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" />
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"/>
			<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/external/bgiframe/jquery.bgiframe.min.js"/>
			<script type="text/javascript" src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"/>
			<script type="text/javascript" src="/js/demos.js"/>
			<script type="text/javascript" src="/themeroller/themeswitchertool/"/>
		<style type="text/css">
	
	#jq-books{width:200px;float:right;margin-right:0}
	#jq-books li{line-height:1.25em;margin:1em 0 1.8em;clear:left}
	#home-content-wrapper #jq-books a.jq-bookImg{float:left;margin-right:10px;width:55px;height:70px}
	#jq-books h3{margin:0 0 .2em 0}
	#home-content-wrapper #jq-books h3 a{font-size:1em;color:black;}
	#home-content-wrapper #jq-books a.jq-buyNow{font-size:1em;color:white;display:block;background:url(http://static.jquery.com/files/rocker/images/btn_blueSheen.gif) 50% repeat-x;text-decoration:none;color:#fff;font-weight:bold;padding:.2em .8em;float:left;margin-top:.2em;}
	
	</style>
<link class="ui-theme" rel="Stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css"/><style charset="utf-8" type="text/css">/* See license.txt for terms of usage */

#firebugBody {
    position: fixed;
    top:0;
    left:0;
    margin:0;
    padding:0;
    width:1px;
    height:1px;
    overflow:visible;
}

.firebugCanvas {
    position:fixed;
    top: 0;
    left: 0;
    display:none;
    border: 0 none;
    margin: 0;
    padding: 0;
    outline: 0;
}

.firebugHighlight {
    z-index: 2147483647;
    position: absolute;
    background-color: #3875d7;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
}

.firebugLayoutBoxParent {
    z-index: 2147483647;
    position: absolute;
    background-color: transparent;
    border-top: 0 none;
    border-right: 1px dashed #BBBBBB;
    border-bottom: 1px dashed #BBBBBB;
    border-left: 0 none;
    margin: 0;
    padding: 0;
    outline: 0;
}

.firebugRuler {
    position: absolute;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
}

.firebugRulerH {
    top: -15px;
    left: 0;
    width: 100%;
    height: 14px;
    background: url(chrome://firebug/skin/rulerH.png) repeat-x;
    border-top: 1px solid #BBBBBB;
    border-right: 1px dashed #BBBBBB;
    border-bottom: 1px solid #000000;
}

.firebugRulerV {
    top: 0;
    left: -15px;
    width: 14px;
    height: 100%;
    background: url(chrome://firebug/skin/rulerV.png) repeat-y;
    border-left: 1px solid #BBBBBB;
    border-right: 1px solid #000000;
    border-bottom: 1px dashed #BBBBBB;
}

.overflowRulerX > .firebugRulerV {
    left: 0;
}

.overflowRulerY > .firebugRulerH {
    top: 0;
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.firebugLayoutBox {
    margin: 0;
    padding: 0;
    border: 0 none;
    outline: 0;
}

.firebugLayoutBoxOffset {
    z-index: 2147483647;
    position: absolute;
    opacity: 0.8;
}

.firebugLayoutBoxMargin {
    background-color: #EDFF64;
}

.firebugLayoutBoxBorder {
    background-color: #666666;
}

.firebugLayoutBoxPadding {
    background-color: SlateBlue;
}

.firebugLayoutBoxContent {
    background-color: SkyBlue;
}

/*.firebugHighlightGroup .firebugLayoutBox {
    background-color: transparent;
}

.firebugHighlightBox {
    background-color: Blue !important;
}*/

.firebugLayoutLine {
    z-index: 2147483647;
    background-color: #000000;
    opacity: 0.4;
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0 none;
}

.firebugLayoutLineLeft,
.firebugLayoutLineRight {
    position: fixed;
    width: 1px;
    height: 100%;
}

.firebugLayoutLineTop,
.firebugLayoutLineBottom {
    position: absolute;
    width: 100%;
    height: 1px;
}

.firebugLayoutLineTop {
    margin-top: -1px;
    border-top: 1px solid #999999;
}

.firebugLayoutLineRight {
    border-right: 1px solid #999999;
}

.firebugLayoutLineBottom {
    border-bottom: 1px solid #999999;
}

.firebugLayoutLineLeft {
    margin-left: -1px;
    border-left: 1px solid #999999;
}
</style></head><div id="_firebugConsole" style="display: none;" FirebugVersion="1.4.5"/><body id="demos">
<!--[if IE 5]><div id="ie5" class="ie"><![endif]-->
<!--[if IE 6]><div id="ie6" class="ie"><![endif]-->
<!--[if IE 7]><div id="ie7" class="ie"><![endif]-->
<div id="wrapper">
	<div id="banner">
		<h1 class="logo">
			<a title="jQuery User Interface" href="/home"><span>jQuery User Interface</span></a>
		</h1>
		<div id="dock">
			<div class="left"/>
			<ul>
				<li>
					<a href="http://jquery.com">jQuery</a>
				</li>
				<li style="padding-right: 12px;">
					<a href="http://plugins.jquery.com/">Plugins</a>
				</li>
				<li style="padding-right: 12px;" class="selected">
					<a href="/home">UI</a>
				</li>
				<li style="padding-left: 12px;">
					<div style="background: rgb(85, 85, 85) none repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 1px; height: 24px; position: absolute; left: 0px;"/>
					<a href="http://blog.jqueryui.com/">Blog</a>
				</li>
				<li>
					<a href="/about">About</a>
				</li>
				<li>
					<a href="http://docs.jquery.com/Donate">Donate</a>
				</li>
			</ul>
			<div class="right"/>
		</div>
		<div id="navigation">
			<div class="left"/>
			<ul>
				<li>
					<a href="/download">Download</a>
				</li>
				<li class="selected">
					<a href="/demos">Demos & Documentation</a>
				</li>
				<li>
					<a href="/themeroller">Themes</a>
				</li>
								<li>
					<a href="/development">Development</a>
				</li>
				<li class="last">
					<a href="/support">Support</a>
				</li>
			</ul>
			<div class="right"/>
		</div>
	</div>
	<div id="content-wrapper">
		<div id="content">
		<div class="content-top"/>		<div class="content">
<script type="text/javascript">
	var section = "demos/draggable";
</script>

<div class="content-body">
	<table cellspacing="0" cellpadding="0" class="layout-grid">
		<tbody><tr>
			<td>
				


	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	



<table cellspacing="0" cellpadding="0" class="layout-grid">
	<tbody><tr>
		<td class="left-nav">
			<dl class="demos-nav">
				<dt>Interactions</dt>
					<dd><a href="/demos/draggable">Draggable</a></dd>
					<dd><a href="/demos/droppable">Droppable</a></dd>
					<dd><a href="/demos/resizable">Resizable</a></dd>
					<dd><a href="/demos/selectable">Selectable</a></dd>
					<dd><a href="/demos/sortable">Sortable</a></dd>
				<dt>Widgets</dt>
					<dd><a href="/demos/accordion">Accordion</a></dd>
					<dd><a href="/demos/datepicker">Datepicker</a></dd>
					<dd><a href="/demos/dialog">Dialog</a></dd>
					<dd><a href="/demos/progressbar">Progressbar</a></dd>
					<dd><a href="/demos/slider">Slider</a></dd>
					<dd><a href="/demos/tabs">Tabs</a></dd>
				<dt>Effects</dt>
					<dd><a href="/demos/addClass">Add Class</a></dd>
					<dd><a href="/demos/removeClass">Remove Class</a></dd>
					<dd><a href="/demos/animate">Animate</a></dd>
					<dd><a href="/demos/effect">Effect
					</a></dd><dd><a href="/demos/hide">Hide</a></dd>
					<dd><a href="/demos/show">Show</a></dd>
					<dd><a href="/demos/switchClass">Switch Class</a></dd>
					<dd><a href="/demos/toggle">Toggle</a></dd>
					<dd><a href="/demos/toggleClass">Toggle Class</a></dd>
				<dt>About jQuery UI</dt>
					<dd><a href="http://jqueryui.com/docs/Developer_Guide">UI Developer Guidelines</a></dd>
					<dd><a href="http://jqueryui.com/docs/Changelog">Changelog</a></dd>
					<dd><a href="http://jqueryui.com/docs/Roadmap">Roadmap</a></dd>
					<dd><a href="http://jqueryui.com/docs/Subversion">Subversion Access</a></dd>
				<dt>Theming</dt>
					<dd><a href="http://jqueryui.com/docs/Theming">Theming jQuery UI</a></dd>
					<dd><a href="http://jqueryui.com/docs/Theming/API">jQuery UI CSS Framework</a></dd>
					<dd><a href="http://jqueryui.com/docs/Theming/Themeroller">ThemeRoller application</a></dd>
					<dd><a href="http://jqueryui.com/docs/Theming/ThemeSwitcher">Theme Switcher Widget</a></dd>

			</dl>
		</td>
		<td class="normal">

			
						<div id="demo-header">
							<h4>Functional demo:</h4>
							<h3>draggable 
							<div id="switcher" style="position: absolute; right: 27px; margin-top: -30px;">
								<a class="jquery-ui-themeswitcher-trigger" 
								href="#" 
								style="border: 1px solid rgb(204, 204, 204); padding: 3px 3px 3px 8px; background: rgb(238, 238, 238) url(http://jqueryui.com/themeroller/themeswitchertool/images/buttonbg.png) repeat-x scroll 50% 50%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; width: 139px; display: block; height: 14px; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt; text-decoration: none; font-size: 11px; font-family: Trebuchet MS,Verdana,sans-serif; cursor: pointer; color: rgb(102, 102, 102);"><span class="jquery-ui-themeswitcher-icon" style="background: transparent url(http://jqueryui.com/themeroller/themeswitchertool/images/icon_color_arrow.gif) no-repeat scroll 50% 50%; float: right; width: 16px; height: 16px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous;"/>
								<span class="jquery-ui-themeswitcher-title">Theme: UI lightness</span></a></div></h3>
						</div>
						<div id="demo-config">
							<div id="demo-frame-wrapper">
								<p id="demo-link"><a target="_blank" href="/demos/draggable/default.html"><span class="ui-icon ui-icon-newwin"/>New window</a></p>
								<div id="demo-frame">
									


	
	
	
	
	
	
	<style type="text/css">
	#draggable { width: 150px; height: 150px; padding: 0.5em; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#draggable").draggable();
	});
</script>



<div class="demo">

<div class="ui-widget-content ui-draggable" id="draggable" style="position: relative;">
	<p>Drag me around</p>
</div>

</div><!-- End demo -->

<div class="demo-description" style="display: none;">

<p>
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
</p>

</div><!-- End demo-description -->




								</div>									
							</div>

							<div id="demo-config-menu">
								


	
	



<div class="demos-nav">
	<h4>Examples</h4>
	<ul>
		<li class="demo-config-on"><a href="/demos/draggable/default.html" target="demo-frame">Default functionality</a></li>
		<li><a href="/demos/draggable/events.html" target="demo-frame">Events</a></li>
		<li><a href="/demos/draggable/constrain-movement.html" target="demo-frame">Constrain movement</a></li>
		<li><a href="/demos/draggable/delay-start.html" target="demo-frame">Delay start</a></li>
		<li><a href="/demos/draggable/snap-to.html" target="demo-frame">Snap to element or grid</a></li>
		<li><a href="/demos/draggable/scroll.html" target="demo-frame">Auto-scroll</a></li>
		<li><a href="/demos/draggable/revert.html" target="demo-frame">Revert position</a></li>
		<li><a href="/demos/draggable/visual-feedback.html" target="demo-frame">Visual feedback</a></li>
		<li><a href="/demos/draggable/handle.html" target="demo-frame">Drag handle</a></li>
		<li><a href="/demos/draggable/cursor-style.html" target="demo-frame">Cursor style</a></li>
		<li><a href="/demos/draggable/sortable.html" target="demo-frame">Draggable + Sortable</a></li>
	</ul>
</div>




							</div>
						</div><div id="demo-notes">

<p>
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
</p>

</div><div id="demo-source"><a class="source-closed" href="#">View Source</a><div style="display: none;"><pre><code><style type="text/css">
	#draggable { width: 150px; height: 150px; padding: 0.5em; }
	</style>
	<script type="text/javascript">
	$(function() {
		$("#draggable").draggable();
	});
</script>



<div class="demo">

<div id="draggable" class="ui-widget-content">
	<p>Drag me around</p>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>
Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
</p>

</div><!-- End demo-description --></code></pre></div></div>
					
<ul class="UIAPIPlugin-toc">
<li><a href="#overview">Overview</a></li>
<li><a href="#options">Options</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#methods">Methods</a></li>
<li><a href="#theming">Theming</a></li>
</ul>
<div id="widget-docs" class="UIAPIPlugin ui-tabs ui-widget ui-widget-content ui-corner-all">
  <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all"><li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#overview">Overview</a></li><li class="ui-state-default ui-corner-top"><a href="#options">Options</a></li><li class="ui-state-default ui-corner-top"><a href="#events">Events</a></li><li class="ui-state-default ui-corner-top"><a href="#methods">Methods</a></li><li class="ui-state-default ui-corner-top" style="display: none;"><a href="#theming">Theming</a></li></ul>
  <div id="overview" class="ui-tabs-panel ui-widget-content ui-corner-bottom clearfix">
    <h2 class="top-header">Overview</h2>
    <div id="overview-main">
        <p>The jQuery UI Draggable plugin makes selected elements draggable by mouse.</p>
<p>Draggable elements gets a class of <code>ui-draggable</code>. During drag the element also gets a class of <code>ui-draggable-dragging</code>. If you want not just drag, but drag-and-drop, see the jQuery UI Droppable plugin, which provides a drop target for draggables.</p>
<p>All callbacks (start, stop, drag) receive two arguments: The original browser event and a prepared ui object, view below for a documentation of this object (if you name your second argument 'ui'):</p>
<ul>
<li><b>ui.helper</b> - the jQuery object representing the helper that's being dragged</li>
<li><b>ui.position</b> - current position of the helper as { top, left } object, relative to the offset element</li>
<li><b>ui.offset</b> - current absolute position of the helper as { top, left } object, relative to page</li>
</ul>
    </div>
    <div id="overview-dependencies">
        <h3>Dependencies</h3>
        <ul>
<li>UI Core</li>
</ul>
    </div>
    <div id="overview-example">
        <h3>Example</h3>
        <div class="example" id="overview-example">
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
<p/><div rel="170" class="tabs-container" id="demo">
Initialize a draggable with default options.<br/>

<pre>$("#draggable").draggable();
</pre>
<p/></div><div class="tabs-container" id="source">

<pre><!DOCTYPE html>
<html>
<head>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <style type="text/css">
    #draggable { width: 100px; height: 70px; background: silver; }
  </style>
  <script type="text/javascript">
	$(document).ready(function() {
		$("#draggable").draggable();
	});
</script>
</head>
<body style="font-size:62.5%;">
  
<div id="draggable">Drag me</div>

</body>
</html>
</pre>
<p/></div>
<p/></div>
    </div>
  </div>
  <div id="options" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide clearfix">
    <h2 class="top-header">Options</h2>
    <div class="toggle-docs-links"><a href="#" class="toggle-docs-detail">Show details</a> | <a href="#" class="toggle-docs-example">Hide examples</a></div><ul class="options-list">
      
<li id="option-addClasses" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-addClasses">addClasses</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Boolean</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>If set to false, will prevent the <code>ui-draggable</code> class from being added. This may be desired as a performance optimization when calling <code>.draggable()</code> init on many hundreds of elements.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>addClasses</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ addClasses: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>addClasses</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var addClasses = $('.selector').draggable('option', 'addClasses');
//setter
$('.selector').draggable('option', 'addClasses', false);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-appendTo" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-appendTo">appendTo</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Element</span>, <span>Selector</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'parent'</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>The element passed to or selected by the <code>appendTo</code> option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>appendTo</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ appendTo: 'body' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>appendTo</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var appendTo = $('.selector').draggable('option', 'appendTo');
//setter
$('.selector').draggable('option', 'appendTo', 'body');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-axis" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-axis">axis</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>String</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>axis</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ axis: 'x' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>axis</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var axis = $('.selector').draggable('option', 'axis');
//setter
$('.selector').draggable('option', 'axis', 'x');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-cancel" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cancel">cancel</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Selector</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">':input,option'</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Prevents dragging from starting on specified elements.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>cancel</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ cancel: 'button' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cancel</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cancel = $('.selector').draggable('option', 'cancel');
//setter
$('.selector').draggable('option', 'cancel', 'button');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-connectToSortable" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-connectToSortable">connectToSortable</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Selector</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Allows the draggable to be dropped onto the specified sortables. If this option is used (<code>helper</code> must be set to 'clone' in order to work flawlessly), a draggable can be dropped onto a sortable list and then becomes part of it.
</p><p>Note: Specifying this option as an array of selectors has been removed.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>connectToSortable</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ connectToSortable: 'ul#myList' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>connectToSortable</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var connectToSortable = $('.selector').draggable('option', 'connectToSortable');
//setter
$('.selector').draggable('option', 'connectToSortable', 'ul#myList');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-containment" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-containment">containment</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Selector</span>, <span>Element</span>, <span>String</span>, <span>Array</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Constrains dragging to within the bounds of the specified element or region. Possible string values: 'parent', 'document', 'window', [x1, y1, x2, y2].</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>containment</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ containment: 'parent' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>containment</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var containment = $('.selector').draggable('option', 'containment');
//setter
$('.selector').draggable('option', 'containment', 'parent');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-cursor" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursor">cursor</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>String</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'auto'</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>The css cursor during the drag operation.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>cursor</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ cursor: 'crosshair' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cursor</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cursor = $('.selector').draggable('option', 'cursor');
//setter
$('.selector').draggable('option', 'cursor', 'crosshair');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-cursorAt" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-cursorAt">cursorAt</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Object</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Moves the dragging helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: <code>{ top, left, right, bottom }</code>.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>cursorAt</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ cursorAt: { left: 5 } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>cursorAt</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var cursorAt = $('.selector').draggable('option', 'cursorAt');
//setter
$('.selector').draggable('option', 'cursorAt', { left: 5 });</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-delay" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-delay">delay</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">0</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>delay</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ delay: 500 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>delay</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var delay = $('.selector').draggable('option', 'delay');
//setter
$('.selector').draggable('option', 'delay', 500);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-distance" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-distance">distance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">1</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>distance</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ distance: 30 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>distance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var distance = $('.selector').draggable('option', 'distance');
//setter
$('.selector').draggable('option', 'distance', 30);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-grid" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-grid">grid</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Array</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Snaps the dragging helper to a grid, every x and y pixels. Array values: [x, y]</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>grid</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ grid: [50, 20] });</code></pre>
</dd>

    
<dt>
  Get or set the <code>grid</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var grid = $('.selector').draggable('option', 'grid');
//setter
$('.selector').draggable('option', 'grid', [50, 20]);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-handle" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-handle">handle</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Element</span>, <span>Selector</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>If specified, restricts drag start click to the specified element(s).</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>handle</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ handle: 'h2' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>handle</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var handle = $('.selector').draggable('option', 'handle');
//setter
$('.selector').draggable('option', 'handle', 'h2');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-helper" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-helper">helper</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>String</span>, <span>Function</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'original'</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Allows for a helper element to be used for dragging display. Possible values: 'original', 'clone', Function. If a function is specified, it must return a DOMElement.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>helper</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ helper: 'clone' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>helper</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var helper = $('.selector').draggable('option', 'helper');
//setter
$('.selector').draggable('option', 'helper', 'clone');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-iframeFix" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-iframeFix">iframeFix</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Boolean</span>, <span>Selector</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>iframeFix</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ iframeFix: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>iframeFix</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var iframeFix = $('.selector').draggable('option', 'iframeFix');
//setter
$('.selector').draggable('option', 'iframeFix', true);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-opacity" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-opacity">opacity</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Float</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Opacity for the helper while being dragged.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>opacity</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ opacity: 0.35 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>opacity</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var opacity = $('.selector').draggable('option', 'opacity');
//setter
$('.selector').draggable('option', 'opacity', 0.35);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-refreshPositions" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-refreshPositions">refreshPositions</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Boolean</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>refreshPositions</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ refreshPositions: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>refreshPositions</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var refreshPositions = $('.selector').draggable('option', 'refreshPositions');
//setter
$('.selector').draggable('option', 'refreshPositions', true);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-revert" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-revert">revert</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Boolean</span>, <span>String</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>If set to true, the element will return to its start position when dragging stops. Possible string values: 'valid', 'invalid'. If set to invalid, revert will only occur if the draggable has not been dropped on a droppable. For valid, it's the other way around.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>revert</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ revert: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>revert</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var revert = $('.selector').draggable('option', 'revert');
//setter
$('.selector').draggable('option', 'revert', true);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-revertDuration" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-revertDuration">revertDuration</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">500</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>The duration of the revert animation, in milliseconds. Ignored if revert is false.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>revertDuration</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ revertDuration: 1000 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>revertDuration</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var revertDuration = $('.selector').draggable('option', 'revertDuration');
//setter
$('.selector').draggable('option', 'revertDuration', 1000);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-scope" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scope">scope</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>String</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'default'</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scope</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ scope: 'tasks' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scope</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scope = $('.selector').draggable('option', 'scope');
//setter
$('.selector').draggable('option', 'scope', 'tasks');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-scroll" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scroll">scroll</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Boolean</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">true</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>If set to true, container auto-scrolls while dragging.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scroll</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ scroll: false });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scroll</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scroll = $('.selector').draggable('option', 'scroll');
//setter
$('.selector').draggable('option', 'scroll', false);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-scrollSensitivity" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSensitivity">scrollSensitivity</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scrollSensitivity</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ scrollSensitivity: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scrollSensitivity</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scrollSensitivity = $('.selector').draggable('option', 'scrollSensitivity');
//setter
$('.selector').draggable('option', 'scrollSensitivity', 40);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-scrollSpeed" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-scrollSpeed">scrollSpeed</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>The speed at which the window should scroll once the mouse pointer gets within the <code>scrollSensitivity</code> distance.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>scrollSpeed</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ scrollSpeed: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>scrollSpeed</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var scrollSpeed = $('.selector').draggable('option', 'scrollSpeed');
//setter
$('.selector').draggable('option', 'scrollSpeed', 40);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-snap" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-snap">snap</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Boolean</span>, <span>Selector</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>If set to a selector or to true (equivalent to '.ui-draggable'), the draggable will snap to the edges of the selected elements when near an edge of the element.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>snap</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ snap: true });</code></pre>
</dd>

    
<dt>
  Get or set the <code>snap</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var snap = $('.selector').draggable('option', 'snap');
//setter
$('.selector').draggable('option', 'snap', true);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-snapMode" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-snapMode">snapMode</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>String</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">'both'</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: 'inner', 'outer', 'both'</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>snapMode</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ snapMode: 'outer' });</code></pre>
</dd>

    
<dt>
  Get or set the <code>snapMode</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var snapMode = $('.selector').draggable('option', 'snapMode');
//setter
$('.selector').draggable('option', 'snapMode', 'outer');</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-snapTolerance" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-snapTolerance">snapTolerance</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">20</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>snapTolerance</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ snapTolerance: 40 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>snapTolerance</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var snapTolerance = $('.selector').draggable('option', 'snapTolerance');
//setter
$('.selector').draggable('option', 'snapTolerance', 40);</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-stack" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-stack">stack</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type"><span>Object</span></dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>Controls the z-Index of the defined group (key 'group' in the hash, accepts jQuery selector) automatically, always brings to front the dragged item. Very useful in things like window managers. Optionally, a 'min' key can be set, so the zIndex cannot go below that value.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>stack</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ stack: { group: 'products', min: 50 } });</code></pre>
</dd>

    
<dt>
  Get or set the <code>stack</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var stack = $('.selector').draggable('option', 'stack');
//setter
$('.selector').draggable('option', 'stack', { group: 'products', min: 50 });</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="option-zIndex" class="option">
  <div class="option-header">
    <h3 class="option-name"><a href="#option-zIndex">zIndex</a></h3>
    <dl>
      <dt class="option-type-label">Type:</dt>
        <dd class="option-type">Integer</dd>
      
      <dt class="option-default-label">Default:</dt>
        <dd class="option-default">false</dd>
      
    </dl>
  </div>
  <div class="option-description" style="display: none;">
    <p>z-index for the helper while being dragged.</p>
  </div>
  <div class="option-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="option-examples-list">
    
<dt>
  Initialize a draggable with the <code>zIndex</code> option specified.
</dt>
<dd>
<pre><code>$('.selector').draggable({ zIndex: 2700 });</code></pre>
</dd>

    
<dt>
  Get or set the <code>zIndex</code> option, after init.
</dt>
<dd>
<pre><code>//getter
var zIndex = $('.selector').draggable('option', 'zIndex');
//setter
$('.selector').draggable('option', 'zIndex', 2700);</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="events" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide clearfix">
    <h2 class="top-header">Events</h2>
    <div class="toggle-docs-links"><a href="#" class="toggle-docs-detail">Show details</a> | <a href="#" class="toggle-docs-example">Hide examples</a></div><ul class="events-list">
      
<li id="event-start" class="event">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-start">start</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dragstart</dd>
    </dl>
  </div>
  <div class="event-description" style="display: none;">
    <p>This event is triggered when dragging starts.</p>
  </div>
  <div class="event-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>start</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').draggable({
   start: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>start</code> event by type: <code>dragstart</code>.
</dt>
<dd>
<pre><code>$('.selector').bind('dragstart', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="event-drag" class="event">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-drag">drag</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">drag</dd>
    </dl>
  </div>
  <div class="event-description" style="display: none;">
    <p>This event is triggered when the mouse is moved during the dragging.</p>
  </div>
  <div class="event-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>drag</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').draggable({
   drag: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>drag</code> event by type: <code>drag</code>.
</dt>
<dd>
<pre><code>$('.selector').bind('drag', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>


<li id="event-stop" class="event">
  <div class="event-header">
    <h3 class="event-name"><a href="#event-stop">stop</a></h3>
    <dl>
      <dt class="event-type-label">Type:</dt>
        <dd class="event-type">dragstop</dd>
    </dl>
  </div>
  <div class="event-description" style="display: none;">
    <p>This event is triggered when dragging stops.</p>
  </div>
  <div class="event-examples" style="display: none;">
    <h4>Code examples</h4>
    <dl class="event-examples-list">
    
<dt>
  Supply a callback function to handle the <code>stop</code> event as an init option.
</dt>
<dd>
<pre><code>$('.selector').draggable({
   stop: function(event, ui) { ... }
});</code></pre>
</dd>

    
<dt>
  Bind to the <code>stop</code> event by type: <code>dragstop</code>.
</dt>
<dd>
<pre><code>$('.selector').bind('dragstop', function(event, ui) {
  ...
});</code></pre>
</dd>

    </dl>
  </div>
</li>

    </ul>
  </div>
  <div id="methods" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide clearfix">
    <h2 class="top-header">Methods</h2>
    <div class="toggle-docs-links"><a href="#" class="toggle-docs-detail">Show details</a></div><ul class="methods-list">
      
<li id="method-destroy" class="method">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-destroy">destroy</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( 'destroy'







)</dd>
    </dl>
  </div>
  <div class="method-description" style="display: none;">
    <p>Remove the draggable functionality completely. This will return the element back to its pre-init state.</p>
  </div>
</li>


<li id="method-disable" class="method">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-disable">disable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( 'disable'







)</dd>
    </dl>
  </div>
  <div class="method-description" style="display: none;">
    <p>Disable the draggable.</p>
  </div>
</li>


<li id="method-enable" class="method">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-enable">enable</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( 'enable'







)</dd>
    </dl>
  </div>
  <div class="method-description" style="display: none;">
    <p>Enable the draggable.</p>
  </div>
</li>


<li id="method-option" class="method">
  <div class="method-header">
    <h3 class="method-name"><a href="#method-option">option</a></h3>
    <dl>
      <dt class="method-signature-label">Signature:</dt>
        <dd class="method-signature">.draggable( 'option'

, optionName

, <span class="optional">[</span>value<span class="optional">] </span>



)</dd>
    </dl>
  </div>
  <div class="method-description" style="display: none;">
    <p>Get or set any draggable option. If no value is specified, will act as a getter.</p>
  </div>
</li>


    </ul>
  </div>
  <div id="theming" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide clearfix">
    <h2 class="top-header">Theming</h2>
    <p>The jQuery UI Draggable plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
</p>
  <p>If a deeper level of customization is needed, there are widget-specific classes referenced within the ui.draggable.css stylesheet that can be modified. These classes are highlighed in bold below.
</p>
    
  <h3>Sample markup with jQuery UI CSS Framework classes</h3>
  <div class="<strong>ui-draggable</strong>"></div>
  <p class="theme-note">
    <strong>
      Note: This is a sample of markup generated by the draggable plugin, not markup you should use to create a draggable. The only markup needed for that is <div></div>.
    </strong>
  </p>

  </div>
</div>

<!-- 
Pre-expand include size: 55070 bytes
Post-expand include size: 98892 bytes
Template argument size: 56660 bytes
Maximum: 2097152 bytes
-->

<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:3340-1!1!0!!en!2 and timestamp 20090604112209 -->


		</td>
	</tr>
</tbody></table>


			</td>
		</tr>
	</tbody></table>
</div>
		</div>
		</div>
	</div>
	
	<div id="footer">
		<div class="bg"/>
		<div class="inner">
			<p>
				<span class="first">Sponsored by: </span>
				<a href="http://www.filamentgroup.com" class="block filamentgroup"><span>Filamentgroup</span></a>
				<span style="float: right; padding-right: 12px;" class="first">© 2009 Paul Bakaus and the <a href="/about">jQuery UI Team</a>.</span>
			</p>
		</div>
	</div>
</div>
<!--[if lte IE 7]></div><![endif]-->
<script type="text/javascript">
	var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl."
			: "http://www.");
	document
			.write(unescape("%3Cscript src='"
					+ gaJsHost
					+ "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script type="text/javascript" src="http://www.google-analytics.com/ga.js"/>
<script type="text/javascript">
	var pageTracker = _gat._getTracker("UA-2427667-3");
	pageTracker._initData();
	pageTracker._trackPageview();
</script>
<script type="text/javascript">
	$(document).ready(function() {
		$('a').click(function() {
			this.blur();
		});
	});
</script>
<div style="border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); border-width: 0px 1px 1px; padding: 8px 3px 3px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; position: absolute; float: left; font-family: Trebuchet MS,Verdana,sans-serif; font-size: 12px; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; color: rgb(255, 255, 255); -moz-border-radius-bottomleft: 6px; -moz-border-radius-bottomright: 6px; z-index: 999999; width: 144px; display: none; top: 214px; left: 802.5px;">	<ul style="margin: 0pt; padding: 0pt; overflow: auto; list-style-type: none; list-style-image: none; list-style-position: outside; height: 200px;">			<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; cursor: auto;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="UI Lightness" alt="UI Lightness" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_light.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">UI lightness</span>		</a></li>				<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; cursor: auto;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="UI Darkness" alt="UI Darkness" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_ui_dark.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">UI darkness</span>		</a></li>			<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; cursor: auto;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Smoothness" alt="Smoothness" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_smoothness.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Smoothness</span>		</a></li>							<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; cursor: auto;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/start/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Start" alt="Start" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_start_menu.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Start</span>		</a></li>				<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; background: rgb(0, 0, 0) none repeat scroll 0% 0%; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; cursor: auto;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Redmond" alt="Redmond" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_windoze.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Redmond</span>		</a></li>						<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/sunny/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Sunny" alt="Sunny" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_sunny.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Sunny</span>		</a></li>						<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/overcast/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Overcast" alt="Overcast" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_overcast.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Overcast</span>				</a></li>						<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/le-frog/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Le Frog" alt="Le Frog" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_le_frog.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Le Frog</span>		</a></li>								<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/flick/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Flick" alt="Flick" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_flick.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Flick</span>				</a></li>				<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/pepper-grinder/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Pepper Grinder" alt="Pepper Grinder" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_pepper_grinder.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Pepper Grinder</span>				</a></li>								<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/eggplant/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Eggplant" alt="Eggplant" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_eggplant.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Eggplant</span>				</a></li>								<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dark-hive/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Dark Hive" alt="Dark Hive" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_dark_hive.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Dark Hive</span>		</a></li>										<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/cupertino/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Cupertino" alt="Cupertino" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_cupertino.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Cupertino</span>				</a></li>				<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/south-street/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="South St" alt="South St" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_south_street.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">South Street</span>				</a></li>		<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Blitzer" alt="Blitzer" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_blitzer.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Blitzer</span>		</a></li>			<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/humanity/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Humanity" alt="Humanity" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_humanity.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Humanity</span>		</a></li>			<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/hot-sneaks/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">		<img title="Hot Sneaks" alt="Hot Sneaks" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_hot_sneaks.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Hot sneaks</span>		</a></li>			<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/excite-bike/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Excite Bike" alt="Excite Bike" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_excite_bike.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Excite Bike</span>			</a></li>		<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/vader/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Vader" alt="Vader" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_black_matte.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Vader</span>			</a></li>				<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/dot-luv/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Dot Luv" alt="Dot Luv" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_dot_luv.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Dot Luv</span>			</a></li>			<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/mint-choc/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Mint Choc" alt="Mint Choc" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_mint_choco.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Mint Choc</span>		</a></li>		<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/black-tie/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Black Tie" alt="Black Tie" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_black_tie.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Black Tie</span>		</a></li>		<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/trontastic/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Trontastic" alt="Trontastic" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_trontastic.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Trontastic</span>			</a></li>			<li style="border: 1px solid rgb(17, 17, 17); margin: 1px; padding: 2px; width: 120px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; clear: left; float: left;"><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/swanky-purse/jquery-ui.css" style="color: rgb(170, 170, 170); text-decoration: none; float: left; width: 100%; outline-color: -moz-use-text-color; outline-style: none; outline-width: 0pt;">			<img title="Swanky Purse" alt="Swanky Purse" src="http://static.jquery.com/ui/themeroller/images/themeGallery/theme_30_swanky_purse.png" style="border: 1px solid rgb(51, 51, 51); margin: 0pt 2px; float: left;"/>			<span class="themeName" style="margin: 3px 0pt; float: left;">Swanky Purse</span>			</a></li>	</ul></div></body></html>